Relative Color Syntax

The goal of relative color syntax is to allow deriving a color from another color.

(訳 : 相対色構文の目的は、ある色から別の色を派生させることを可能にすることです。)

綾坂こと.icon

めっちゃ使ってる

便利すぎる

ブランドカラー(--brand)を決めて、他の色はoklch()とRelative Color Syntaxで決めてる

code:example.css

:root {

--brand: #224;

--base: oklch(from var(--brand) 90% 0.04 h);

--text: oklch(from var(--brand) 35% 0.04 h);

--link-left: oklch(from var(--brand) 85% 0.07 h / .5);

--link-right: oklch(from var(--brand) 85% 0.11 h/ .5);

--shadow-light: oklch(from var(--brand) 100% 0.04 h / .3);

--shadow-dark: oklch(from var(--brand) 50% 0.04 h / .2);

}

背景のグラデーションもlinear-gradient()・calc()・oklch()・Relative Color Syntaxで作ってる

code:example.css

body {

background: linear-gradient(

to bottom right,

oklch(from var(--base) l c calc(h - 20)),

oklch(from var(--base) l c calc(h + 20))

);

}